<template>
  <div v-if="ChooseConfig.isShow">
    <LsdDialog @handleBtn="handleBtn" :dialogConfig="ChooseConfig" @close="close(ChooseConfig)">
      <div class="box" v-if="ChooseFormConfig" slot="dialog">
        <DialogForm ref="formComponent" :formConfig="ChooseFormConfig" />
        <div class="right">
          <el-button type="primary" @click="query" size="mini">查询</el-button>
          <el-button size="mini" @click="reset">重置</el-button>
        </div>
      </div>
      <div slot="dialog" class="tableDiv">
        <div v-if="ChooseConfig.unit && ChooseConfig.unit !== ''" style="font-size:16px;margin-bottom: 5px;">
          已选择{{ selection.length }}{{ ChooseConfig.unit }}</div>
        <LsdTable :autoHeight="ChooseTableConfig.autoHeight || false" @pageChange="handleSizeChange"
          :multiple="ChooseTableConfig.multiple" :selectColumnAttr="ChooseTableConfig.selectColumnAttr"
          :paginationAtrrs="ChooseTableConfig.paginationAtrrs" :compRef="ChooseTableConfig.compRef"
          :ref="ChooseTableConfig.compRef" :columns="ChooseTableConfig.columns" :title="ChooseTableConfig.title"
          :actions="ChooseTableConfig.actions" :tableData="ChooseTableConfig.tableData"
          :tableAttr="ChooseTableConfig.tableAttr" :isShowPage="ChooseTableConfig.isShowPage"
          :isSelectFlag="ChooseTableConfig.isSelectFlag" :isSequenceFlag="ChooseTableConfig.isSequenceFlag"
          @select="select" @selection-change="select" />
      </div>
    </LsdDialog>
  </div>
</template>

<script>
export default {
  props: {
    ChooseConfig: {
      type: Object
    },
    ChooseFormConfig: {
      type: Object
    },
    ChooseTableConfig: {
      type: Object
    }
  },
  data() {
    return {
      selection: []
    };
  },
  methods: {
    select(val) {
      // 是否需要判断队员状态
      if (this.ChooseConfig.checkSelect) {
        this.$emit("checkSelect", val, this.selection);
      } else {
        this.selection = val;
      }
    },
    close(val) {
      this.selection = [];
      const ref = this.ChooseTableConfig.compRef;
      this.$refs[ref].$refs[ref].clearSelection();
      this.$emit("close", val);
    },
    // 查询.$refs[ref]
    query() {
      console.log(this.$refs.formComponent.form, "?this.$refs.formComponent.form");
      // this.$emit("getTeamList", this.$refs.formComponent.form)
      this.$emit("query", this.ChooseConfig);
      this.$emit("chooseQuery", this.selection, this.$refs.formComponent.form);
    },
    // 重置
    reset() {
      this.$refs.formComponent.form = this.$refs.formComponent.$options.data().form;
      this.$emit("reset");
      this.$emit("chooseQuery", this.selection, this.$refs.formComponent.form);
      this.$refs[this.ChooseTableConfig.compRef].paginationAtrrsInner = this.ChooseTableConfig.paginationAtrrs;
    },
    handleBtn(item) {
      this[item.id]();
    },
    confirm() {
      this.$emit("teamAdd", this.ChooseConfig, this.selection);
    },
    cancel() {
      this.ChooseConfig.isShow = false;
    },
    handleSizeChange(val) {
      this.$emit("handleChooseChange", this.selection, this.$refs.formComponent.form, val);
    }
  }

};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  margin: 10px 0 10px 0;

  .EmergencyList-form {
    width: 100%;
  }

  .right {
    margin: 5px 0 0 20px;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: 10px;
  }
}

:deep(.el-dialog) {
  height: 77% !important;
}

:deep(.el-cascader.el-cascader--small) {
  width: 100%;
}

:deep(.el-input-number.is-controls-right.inventoryInput) {
  :deep(.el-input__inner) {
    border: none;
    width: 80px;
  }
}

:deep(.el-table__cell) {

  .el-input__inner,
  .el-form-item__content,
  .el-input-number {
    width: 100%;
  }

  .el-form-item {
    width: 100%;
    margin-bottom: 0;
    margin-right: 0;
  }
}

.tableDiv {
  :deep(.leftTopBtn) {
    height: 0;
    margin-bottom: 0;
  }
}
</style>
